<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
vue:
1.想使用vue,就必须创建一个vue实例,并要传入一个配置对象
2.root容器里的代码依然符合html规范,只不过混入了一些特殊的vue语法
3.root容器里的代码被称为【vue模板】
4.Vue实例和容器是一一对应的;
5.真实开发中只有一个vue实例,并且会配合着组件,形成一个递进结构;
6.{{xxx}}要写成js表达式,且xxx可以自动读取data中所有属性;
7.一旦data中的数据发生改变,html中用到该数据的地方也会自动更新;
-->
<!--准备一个容器-->
<div id="root">
    <h1>hello,{{name}}</h1>
    <h2>我的年龄是{{age}}</h2>
    <p>我的身份证号是:{{idCard.card}}</p>
</div>


<script type="application/javascript">
    Vue.config.productionTip = false    // 阻止vue在启动时生成生产提示

    // 创建vue示例
    new Vue({
        el: '#root', // 用于指定当前vue实例为哪个容器服务,值通常为css选择字符串

        // data中用于存储数据,数据供el所指定容器去使用,暂时只写成一个对象。
        data: {
            name: 'Jack',
            age: 18,
            idCard: {
                id: 1,
                card: 9893891238921
            }
        }
    })

</script>
</body>
</html>
